<template>
  <div id="app">
	  <div class="left-menu-wrapper">
	  	<left-menu></left-menu>
	  </div>
	  <div class="right-wrapper">
	  	<div class="top-menu-wrapper">导航栏</div>
		<div class="bottom-content-wrapper">
			<router-view></router-view>
		</div>
	  </div>
  </div>
</template>

<script>
	import LeftMenu from './components/commons/LeftMenu.vue';
	export default{
		name: 'App',
		components: {
			LeftMenu
		}
	}
</script>

<style lang="stylus">
	#app
		display flex
		align-items stretch
		height 100%
		.left-menu-wrapper
			border 1px solid lightgrey
			flex 0 0 220px
		.right-wrapper
			border 1px solid grey
			flex 1
			.top-menu-wrapper
				height 50px
				background-color lightgrey
				text-align center
				line-height 25px
			.bottom-content-wrapper
				padding 15px
				padding-bottom 50px
				height 100%
				overflow-y scroll
				box-sizing border-box
</style>
